<script setup>
import { ref, defineExpose,watch, defineProps } from 'vue'
import { ElForm, ElFormItem, ElInput, ElColorPicker } from 'element-plus'
const props = defineProps({
    options: {// 配置属性
        type: Object,
        default: () => ({})
    }
})
const options = ref(props.options)
watch(() => props.options, (newValue, oldValue) => {
    if (newValue !== oldValue) {
        options.value = props.options
    }
})


defineExpose({
    options: options
})
</script>

<template>
    <div class="_container_md">
        <el-form label-width="auto" style="max-width: 600px">
            <el-form-item label="接口地址" label-position="left">
                <el-input v-model="options.url" />
            </el-form-item>
            <el-form-item label="宽度" label-position="left">
                <el-input v-model="options.width" />
            </el-form-item>
            <el-form-item label="高度" label-position="left">
                <el-input v-model="options.height" />
            </el-form-item>
            <el-form-item label="背景颜色" label-position="left">
                <el-color-picker v-model="options.backgroundColor" show-alpha />
            </el-form-item>
        </el-form>
    </div>
</template>

<style scoped lang="scss"></style>